<template>
	<div class="user-index">
		<div class="user-bg">
			<div class='container'>
				<div class="row">
					<div class="col-sm-2 text-center">
						<img class="img-circle u-avatar-transition" :src="info.avatar">
					</div>
					<div class="col-sm-5 content">
						<div class="header">{{info.name}}</div>
	                    <div class="description">
		                    {{info.description || 'Nothing in here...'}}
		                </div>
	                    <div class="actions">
	                    	<a href="javascript:void(0)" class="btn btn-danger btn-sm" @click="followUser" v-if="name !== user.name" :disabled="!info.id">
	                            关注
	                        </a>
		                    <router-link to="/user/modify" class="btn btn-success btn-sm" v-if="name === user.name" :disabled="!info.id">
		                    	编辑资料
		                    </router-link>
	                    </div>
	                    <div class="footer"></div>
	                </div>
	                <!-- <div class="col-sm-5 user-info">
	                	<div class="website">
	                		<div>
	                			<span>个人网址：</span><a href="http://www.lcckup.com" target="_blank">www.lcckup.com</a>
	                		</div>
	                		<div>
	                			<span>GitHub：</span><a href="https://github.com/jindai0305" target="_blank">github.com/jindai0305</a>
	                		</div>
	                	</div>
	                </div> -->
				</div>
			</div>
		</div>
		<div class="container dynamic comments-wrap">
			<div class="row">
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							最近的评论
						</div>
						<ul class="list-group">
							<template v-if="!info.comment.length">
								<li class="nothing">Nothing in here...</li>
							</template>
							<template v-else>
								<li v-for="item in info.comment" class="item">
									<div class="item-header">
										<router-link :to="`/topics/item_${item.item_id}.html`" class="title">{{item.title}}</router-link> <font class="index-in">in</font> <time class="time">{{item.created_at}}</time>
									</div>
									<div>
										<span class="reply" v-if="item.reply" @click="routeToUser(item.reply.name)">@{{item.reply.name}}</span>
										<p class="markdowm__content" @click="showImage($event)" v-html="toMarkDown(item.content)"></p>
									</div>
								</li>
							</template>
						</ul>
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							最近的留言
						</div>
						<ul class="list-group">
							<template v-if="!info.message.length">
								<li class="nothing">Nothing in here...</li>
							</template>
							<template v-else>
								<li v-for="item in info.message" class="item msg">
									<div class="markdowm__content">
										<span class="reply" v-if="item.reply" @click="routeToUser(item.reply.name)">
											@{{item.reply.name}}
										</span>
										{{toMarkDown(item.content)}}
									<font class="index-in">in</font> <time class="time">{{item.created_at}}</time>
									</div>
								</li>
							</template>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import {mapGetters,mapMutations} from 'vuex'
    import Marked from 'common/convertMarkDown'
    import {setTitle} from 'common/dom'

	export default {
		computed: {
            ...mapGetters([
              'user'
            ])
        },
        data() {
        	return {
        		name: '',
	        	info: {
	        		name: '加载中...',
	        		avatar: '/avatar/default.jpg',
	        		message: [],
	        		comment: []
	        	}
        	}
        },
        created() {
        	this.name = this.$route.params.name
            setTitle(this.name)
        	this.__getUserInfo()
        },
        beforeRouteUpdate(from,to,next) {
        	this.name = from.params.name
        	this.__getUserInfo()
        	next()
        },
		methods: {
			toMarkDown(string) {
				return Marked(string, { sanitize: true })
			},
			showImage(event) {
				if(event.target.nodeName === 'IMG'){
					this.setShowImage(event.target.src)
				}
			},
			followUser() {
				alert('点击了关注');
			},
			routeToUser(name) {
				this.$router.push({
					name: 'user',
					params: {
						name: name
					}
				})
			},
			__getUserInfo(){
				this.$http.get('/user/'+this.name).then((response) => {
					this.setDataReady(true)
					this.info = response.data
				})
			},
			...mapMutations({
              setDataReady: 'SET_DATA_READY',
              setNavbarColor: 'SET_NAVBAR_COLOR',
              setShowImage: 'SET_SHOW_IMAGE'
            })
		}
	}
</script>

<style lang="scss" scope>
	.user-index {
		font-size: 15px;
		p {
			margin: 5px 0;
		}
		.user-bg {
			background: #99ADBA;
			border-radius: 0;
		    padding-top: 30px;
		    padding-bottom: 50px;
		    color: #fff;
		    img {
				width: 120px;
				height: 120px;
			}
			.content {
				padding: 0;
				.header {
					margin-top: 10px;
					font-size: 18px;
	    			font-weight: 700;
				}
				.description {
					margin: 12px 0;
				}
			}
		}
		.dynamic {
			margin-top: 20px;
			.nothing{
				padding-left: 10px;
				line-height: 30px;
			}
			.panel {
				.list-group {
					max-height: none;
					.item {
						display: list-item;
						padding: 12px 10px 2px 10px;
						border-bottom: 1px solid #f6f6f6;
						&:hover {
							background: #f6f6f6;
						}
						.item-header {
							margin-bottom: 2px;
							.title {
								cursor: pointer;
								color: #6289ad;
								margin-right: 5px;
								&:hover{
									color: #99ADBA;
								}
							}
						}
						.time {
							color: #9caebf;
						}
						.reply {
					    	cursor: pointer;
							display: inline-block;
							color: #d6514d;
							opacity: .7;
					    	transition: color .15s ease 0s;
					    	margin-right: 10px;
					    	&:hover {
								opacity: 1;
							}
						}
						.index-in {
							font-weight: bold;
							color: #F92659;
						}
					}
					.msg {
						padding: 12px 10px 2px 10px;
						border-bottom: 1px solid #f6f6f6; 
					}
				}
			}
		}
	}

	.user-index .user-bg .user-info .website {
		margin-top: 10px;
	}

	.user-index .user-bg .user-info .website div{
		padding: 5px 0;
	}

	.user-index .user-bg .user-info .website span{
		font-weight: bold;
		font-size: 16px;
	}
	.user-index .user-bg .user-info .website a{
		color: #fff;
		cursor: pointer;
	}

	@media only screen and (max-width: 991px){
		.user-index .user-bg .content {
		    margin-left: 25px;
		}
	}
	@media only screen and (min-width: 992px){
		.user-index .user-bg .content {
		    margin-left: 0;
		}
	}
	@media only screen and (max-width: 768px){
		.user-index {
			.user-bg {
				.content {
				    margin-left: 0;
				    margin-top: 10px;
				    text-align: center;
				}
				.website {
				    text-align: center;
				}
			}
		}
	}
	@media only screen and (min-width: 768px){
		.user-index .user-bg .content {
		    text-align: left;
		}
	}
</style>